<template>
    <div class="waterPopup" v-if="show">
        <div class="body">
            <div class="title">事故详情</div>
            <div class="content">
                <div class="left"> <span>金沙江大桥</span> <span>{{ currentDate.name }}</span> </div>
                <div class="right">
                    <div class="event" @click="eventHandle('event')">事件报警</div>
                    <div class="video" @click="eventHandle('video')">监控画面</div>
                </div>
            </div>

            <div class="event-box" v-if="showEvent">
                事故已报警
            </div>
            <div class="video-box" v-if="showVideo">
                <div class="title1">监控回放</div>
                <div class="content1"></div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
const props = defineProps({
    currentDate: {
        type: Object,
        default: () => { }
    }
})
const show = ref(false)
const showEvent = ref(false)
const showVideo = ref(false)

const eventHandle = (type) => {
    if (type === 'event') {
        showEvent.value = !showEvent.value;
    } else {
        showVideo.value = !showVideo.value;
    }
}


const open = () => {
    show.value = true;
    // if (!show.value) {
    //     close();
    // }
    // if (show.value) {
    //     close();
    // } else {
    //     show.value = true;
    // }
}
const close = () => {
    show.value = false;
    showEvent.value = false;
    showVideo.value = false;
}

const allClose = (e) => {
    const popup = document.querySelector('.waterPopup');
    if (popup && !popup.contains(e.target)) {
        close();
    }
}
defineExpose({
    open,
    close
})
onMounted(() => {
    document.addEventListener('click', allClose)
})
onUnmounted(() => {
    document.removeEventListener('click', allClose)
})
</script>
<style lang="scss" scoped>
/* 弹窗基础定位 */
.waterPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;

    .body {
        background: #1F3448;
        width: 250px;
        position: relative;

        .title {
            padding: 5px 10px;
            background: #428FC0;
            color: white;
            font-weight: bold;
        }

        .content {
            display: flex;
            gap: 20px;
            justify-content: space-between;
            padding: 10px;

            .left {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 12px;
                color: white;
                font-weight: bold;
                cursor: pointer;
            }

            .right {
                display: flex;
                flex-direction: column;
                gap: 20px;
                align-items: center;
                color: white;
                cursor: pointer;

                .event {
                    width: 100px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    background: linear-gradient(-90deg, #143739 0%, #16891A 100%);
                }

                .video {
                    width: 100px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    border: 1px solid #428FC0;
                }

            }
        }

        .event-box {
            position: absolute;
            top: -55px;
            left: 0px;
            color: #16891A;
            width: 130px;
            /* background: #1f344873; */
            background: linear-gradient(90deg, #1f3448 0%, #1f344800 100%);
            padding: 5px 10px;
            font-weight: bold;
            font-size: 20px;
            width: 150px;
        }

        .video-box {
            position: absolute;
            top: 0px;
            right: -230px;
            width: 200px;

            .title1 {
                padding: 5px 10px;
                background: #428FC0;
                color: white;
                font-weight: bold;
            }

            .content1 {
                height: 110px;
                background: #7B7B7B;
            }
        }
    }
}
</style>